<template>
  <div class="app-container">
    <div v-show="!dialogInfo.visible && !detailsInfo.visible">
      <!-- 条件栏 -->
      <PageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
      >
        <template v-slot:filter-button>
          <el-button
            v-if="$permission('brand:upload')"
            style="marginleft: 10px"
            @click="uploadImg"
            >上传图片</el-button
          >
        </template>
        <template v-slot:filter-uploadFile>
          <el-upload
            :headers="uploadInfo.headers"
            :show-file-list="false"
            v-model:data="uploadInfo.data"
            :on-error="uploadError"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :action="uploadInfo.action"
          >
            <el-button>导入模板</el-button>
          </el-upload>
        </template>
      </PageFilter>
      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="getBrandPage"
        :tab-index="true"
        :check-box="false"
        v-model:query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
      >
        <template v-slot:col-name="scope">
          <p class="slip-edit" @click="showDetail(scope.row)">
            {{ scope.row.name || '-' }}
          </p>
        </template>
      </TableContainer>
    </div>
    <Modify
      v-if="dialogInfo.visible"
      :id="dialogInfo.id"
      v-model:visible="dialogInfo.visible"
      :title="dialogInfo.title"
      :type="dialogInfo.type"
      @returnBack="returnModify"
    />
    <Details
      v-if="detailsInfo.visible"
      :id="detailsInfo.id"
      v-model:visible="detailsInfo.visible"
      @returnBack="getList"
    ></Details>
    <DialogUpload
      v-if="dialogUploadInfo.visible"
      v-model:show-dialog="dialogUploadInfo.visible"
      :vaildate-api="dialogUploadInfo.vaildateApi"
      :api="dialogUploadInfo.api"
      @callback="getList"
    >
    </DialogUpload>
  </div>
</template>

<script setup name="brandManage">
import axios from 'axios'
import {
  getBrandPage,
  brandFile,
  brandVaildateFile,
  downloadFileBrands,
} from '@/api/core.js'
import Modify from './modify'
import Details from './details'
import { ElMessage, ElLoading } from 'element-plus'
import { exportTemplateExcel } from '@/api/pub'
import { useRoute } from 'vue-router'
const store = useStore()
const $route = useRoute()
const { proxy } = getCurrentInstance()

const dialogUploadInfo = ref({
  visible: false,
  api: brandFile,
  vaildateApi: brandVaildateFile,
})
//导入相关配置
const uploadInfo = ref({
  action: axios.defaults.baseURL + '/core/brands/import/excel',
  headers: {
    Authorization: store.state.user.token,
  },
  loading: {},
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    nameLike: '',
    sort: 'create_time desc',
    searchType: 'brand',
  },
  list: [
    {
      type: 'button',
      label: '新增',
      event: create,
      show: proxy.$permission('brand:add'),
    },
    { type: 'slot', value: 'button' },
    {
      type: 'button',
      label: '下载图片',
      event: downloadFile,
      show: proxy.$permission('brand:downloadFile'),
    },

    {
      type: 'button',
      label: '下载模板',
      event: downloadTemplate,
    },
    {
      type: 'slot',
      value: 'uploadFile',
    },
    {
      type: 'input',
      label: '名称/编码',
      value: 'keyword',
      event: search,
    },
    {
      type: 'button',
      label: '搜索',
      event: search,
      show: true,
    },
  ],
})

// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    {
      label: '名称',
      value: 'name',
      width: '250',
      type: 'slot',
    },
    {
      label: '编码',
      value: 'code',
    },
    {
      label: '营业执照(过期日期)',
      value: 'businessLicense',
    },
    {
      label: '医疗器械生产许可(过期日期)',
      value: 'medicalDeviceLicense',
    },
    {
      label: '医疗器械生产备案(过期日期)',
      value: 'firstMedicalDeviceFiling',
    },
    {
      label: '卫生许可证(过期日期)',
      value: 'sanitaryLicense',
    },
    {
      label: '经营许可证(过期日期)',
      value: 'operatingPermit',
    },
    {
      label: '创建人',
      value: 'createUserName',
    },
    {
      label: '创建时间',
      value: 'createTime',
    },
    {
      label: '备注',
      value: 'remark',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '50',
    btList: [
      {
        label: '修改',
        event: update,
        show: proxy.$permission('brand:update'),
      },
    ],
  },
})
// 表单相关
const formInfo = ref({
  ref: null,
  data: {},
  fieldList: [
    {
      label: '名称',
      value: 'name',
      type: 'input',
      required: true,
    },
    {
      label: '编码',
      value: 'code',
      type: 'input',
      required: true,
    },
    {
      label: '营业执照(过期日期)',
      value: 'businessLicense',
      type: 'date',
    },
    {
      label: '医疗器械生产许可(过期日期)',
      value: 'medicalDeviceLicense',
      type: 'date',
    },
    {
      label: '第一类医疗器械生产备案(过期日期)',
      value: 'firstMedicalDeviceFiling',
      type: 'date',
    },
    {
      label: '生产企业卫生许可证(过期日期)',
      value: 'sanitaryLicense',
      type: 'date',
    },
    {
      label: '经营许可证(过期日期)',
      value: 'operatingPermit',
      type: 'date',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
  ],
  rules: {},
  labelWidth: '100px',
})
// 弹窗相关
const dialogInfo = ref({
  title: '',
  id: '',
  visible: false,
  type: '',
})
const detailsInfo = ref({
  visible: false,
  id: '',
})
watch(
  ()=>$route,
  (route)=>{
    const params = route.params;
    if (params && params.brandId) {
      showDetail({ id: params.brandId });
    }
  },{
    immediate: true
  }
)
function downloadFile() {
  downloadFileBrands(filterInfo.value.query).then((res) => {
    if (res) {
      proxy.$fn.parseExcel(res)
    }
    uploadInfo.value.loading.close()
  })
}

function uploadImg() {
  dialogUploadInfo.value.visible = true
}
function returnModify() {
  if (dialogInfo.value.data && dialogInfo.value.data.id) {
    getList()
  } else {
    search()
  }
}
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
//新增
function create() {
  dialogInfo.value = {
    title: '新增厂家',
    visible: true,
    type: 'create',
    id: '',
  }
}
// 编辑
function update(data) {
  dialogInfo.value = {
    title: '修改厂家',
    visible: true,
    type: 'update',
    id: data.id,
  }
}
function beforeUpload() {
  //发生请求时打开加载动画
  uploadInfo.value.loading = ElLoading.service({
    fullscreen: true,
    background: 'rgba(255,255,255,.4)',
  })
  return true
}
function uploadSuccess(resp) {
  uploadInfo.value.loading.close()
  if (resp && resp.success) {
    ElMessage.success({
      duration: 3000,
      showClose: true,
      message: resp.msg,
    })
    getList()
  } else {
    ElMessage.error({
      message: resp.msg,
      duration: 3000,
      showClose: true,
    })
  }
}
function uploadError(err) {
  if (err) {
    ElMessage.error({
      message: '系统错误',
      duration: 3000,
      showClose: true,
    })
  }
  uploadInfo.value.loading.close()
}
function downloadTemplate() {
  exportTemplateExcel('brand_import').then((res) => {
    if (res) {
      proxy.$fn.parseExcel(res)
    }
  })
}
function showDetail(row) {
  detailsInfo.value.id = row.id
  detailsInfo.value.visible = true
}
</script>

<style scoped></style>
